/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {Button, Form, Popconfirm, Table, Tabs} from 'antd';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import DescriptionGroup from "../../../components/DescriptionGroup";
import ViewTitle from "../../../components/ViewTitle";
import styles from "../../index.less";
import {ModalView} from "antd-extra";
import ModalCreateOutboundLot from "./ModalCreateOunboundLot";
import ModalOutboundLotDetail from "./ModalOutboundLotDetail";
import _ from "lodash";
import ProductionElement from "../../../components/ProductionElement";
import SalesBase from "../../sales/SalesBase";

const {TabPane} = Tabs;
moment.locale('zh-cn');
const table = 'SalesProdRecord';
@Form.create()
@connect(({user, global, dynamicLabel, sales, store}) => ({...user, ...store, ...sales, ...dynamicLabel, ...global}))
export default class ModalOutboundOrderDetail extends SalesBase {
  constructor(props) {
    super(props);
    const {record} = props;
    this.state = {...record};
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'global/getModel',
      payload: {table}
    });
    this.props.dispatch({
      type: 'global/getModel',
      payload: {table: 'OutboundLot'}
    });

    const {record, dispatch} = this.props;
    const {spLotId} = record;

    dispatch({
      type: 'store/findOutboundLots',
      payload: {spLotId, lotType: '订单出库'}
    });
  }

  onOutboundLotDetail = values => {
    ModalView.open(ModalOutboundLotDetail, {
      title: '出货记录详情',
      width: '920px',
      maskClosable: false
    }, {
      values,
      callback: (result) => {
        const {lotCode} = values;
        const {shippingFee = 0, fileList = []} = result;

        this.props.dispatch({
          type: 'store/updateShippingFee',
          payload: {shippingFee, lotCode, fileList}
        }).then(response => {
          this.requestReturn(response);
          this.componentDidMount();
        });
      }
    });
  };

  //采购单中需要在出货单中显示的字段
  showKeys = ['projectType', 'division', 'customer', 'address', 'contacts', 'contactsPhone', 'prodName', 'prodCode', 'count', 'label', 'package', 'packageWay', 'deliverWay', 'deliverRequire', 'outboundCount'];

  lotCols() {
    const temp = this.getOutboundLotCols();
    temp.push(
      {
        title: '操作', key: 'opt', dataIndex: "opt", render: (value, record) => {
          return <span>
                          {<a style={{marginRight: '6px'}}
                              onClick={() => this.onOutboundLotDetail(record)}>详情</a>}
            {<Popconfirm
              title="确认删除"
              onConfirm={() => {
                this.props.dispatch({
                  type: 'store/deleteOutboundLot',
                  payload: {...record}
                }).then(res => {
                  this.componentDidMount();
                });
              }}
              okText="是"
              cancelText="否"
            >
              <a style={{marginRight: '6px'}}>删除</a>
            </Popconfirm>}
            </span>;
        }
      }
    );
    return temp;
  }

  materialCols = [
    {
      title: '商品', dataIndex: 'prodName', render: (value, record) => {
        const {prodName, prodCode} = record;
        return <ProductionElement name={prodName} code={prodCode}></ProductionElement>;
      }
    },
    {
      title: '物料', dataIndex: 'material', render: (value, record) => {
        const {name, code} = record;
        return <ProductionElement name={name} code={code}></ProductionElement>;
      }
    },
    {title: '物料编号', dataIndex: 'number'},
    {title: '物料类型', dataIndex: 'type'},
    {title: '物料规格', dataIndex: 'spec'},
    {
      title: '物料含量', dataIndex: 'materialContent', render: (value, record) => {
        return <div>{value + "%"}</div>;
      }
    },
    {title: '物料供应商', dataIndex: 'vendor'}
  ];

  render() {
    const {style, cols = 3, outboundLots = [], record = {}} = this.props;
    const model = this.props[`${table}Model`];
    if (!model) return;

    const labels = [];
    _.map(model, (item, key) => {
      const {enableArea} = item;
      if (_.includes(enableArea, 'detail'))
        labels.push(item);
    });

    return (
      <div style={{...style}}>
        <ViewTitle
          title={'商品信息'}
          level={1}
        ></ViewTitle>
        <DescriptionGroup labels={labels} values={record}></DescriptionGroup>

        <ViewTitle
          title={'出货记录列表'}
          actions={<Button type={'primary'} onClick={() => {
            ModalView.open(ModalCreateOutboundLot, {
              title: '创建出货记录',
              width: '1080px'
            }, {
              record,
              callback: payload => {
                this.props.dispatch({
                  type: 'store/createOutboundLot',
                  payload
                }).then(res => {
                  this.requestReturn(res);
                  this.componentDidMount();
                });
              }
            });
          }}>添加出货记录</Button>}
        ></ViewTitle>
        <Table
          className={styles.antTable}
          bordered={true}
          columns={this.lotCols()}
          dataSource={outboundLots}
          scroll={{x: true}}
          pagination={true}
        ></Table>

      </div>

    );
  }
}

